<template>
  <div class="home">
    <van-loading
      v-if="homeLoding"
      size="24px"
      vertical
    >
      加载中...
    </van-loading>
    <div v-else>
      <nav>
        <van-tabs
          class="tabs"
          @change="onChannelChange"
        >
          <van-tab
            v-for="item in channelList"
            :key="item.id"
            :title="item.name"
            :name="item.id"
          />
        </van-tabs>
        <div
          class="icon-wrapper"
          @click="goSearchPage"
        >
          <van-icon
            name="search"
            size="20"
          />
        </div>
        <div class="icon-wrapper">
          <van-icon
            name="ellipsis"
            size="20"
          />
        </div>
      </nav>
      <main>
        <h1
          v-if="articleList.length === 0"
          class="dataNull"
        >
          暂无数据
        </h1>
        <article-list :data="articleList" />
      </main>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'HomePage',
  data() {
    return {
      homeLoding: false,
    }
  },
  computed: {
    // 集中导入model层数据
    ...mapState('channel', [
      'channelList',
    ]),
    ...mapState('article', [
      'articleList',
    ]),
  },
  methods: {
    // 频道
    ...mapActions('channel', [
      'updateChannelList',
    ]),
    // 文章
    ...mapActions('article', [
      'updateArticleList',
    ]),
    onChannelChange(id) {
      this.updateArticleList(id);
    },
    goSearchPage() {
      this.$router.push('/search');
    },
  },
  async created() {
    this.homeLoding = true;
    await this.updateChannelList();
    await this.updateArticleList(0);
    this.homeLoding = false;
  },
}
</script>

<style lang="less" scoped>
@import url('@/assets/styles/common.less');

.home {
  .layout;

  nav {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 3px 3px #e9e9e9;

    .tabs {
      flex: 1;
      overflow: hidden;
      position: relative;

      &::after {
        content: '';
        display: block;
        height: 100%;
        width: 40px;
        background: linear-gradient(to right, transparent, white);
        position: absolute;
        top: 0;
        right: 0;
      }
    }

    .icon-wrapper {
      margin: 8px;

      &:last-child {
        margin-right: 16px;
      }
    }
  }

  main {
    padding: 0 8px;
    .dataNull {
      text-align: center;
      line-height: 400px;
      color: #999;
}
  }

}
</style>
